<template>
	<view class="content">
		<view class="header"  v-for="(item, i) in giveList" :key="i" @click="goDetail(item.m_order_id,item.avatar,item.nickname,item.create_time,item.title)">
			<view class="sec">
				<view class="top">
					<view class="left">
						<image :src="item.avatar"></image>
						<view class="name">
							<text class="name_text">{{item.nickname}}</text>
							<text class="name_time">{{item.create_time}}</text>
						</view>
					</view>
				</view>
				<view class="miaoshu">
					{{item.title}}
				</view>
			</view>
			<view class="detail_bom_list">
				<view class="jian_bom" >
					<view class="tui_sec" v-for="(it, i) in item.goods_list" :key="i"  >
						<view class="picurl flexs">
							<image :src="it.prize_icon" mode="aspectFit"></image>
						</view>
						<text class="sec">￥{{it.price}}</text>
					</view>
					
				</view>
				<view class="number flexs" v-if="item.goods_list">
					+{{item.goods_list.length}}
				</view>
			</view>
		</view>
		
		<u-loadmore :status="morestatus" v-if="giveList!=''" :load-text="loadText"/>
		<view class="emptya flex-column flex-c-c" v-if="giveList == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->
			<text class="size-32 color-h">暂无数据</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadText: {
				loadmore: '上拉加载更多',
				loading: '正在加载，请喝杯茶',
				nomore: '我是有底线的'
			},
			morestatus:"loadmore",
			giveList:[],
			page:1,
		};
	},
	onShow() {
		this.getlist();
	},
	onPullDownRefresh() {
		this.page=1;
		this.orderlist = []
		this.order_idarr = []
		this.giveList = []
		this.zongjia = 0
		this.getlist();
	},
	onReachBottom() {
		this.page++;
		this.getlist(2);
	},
	onHide() {
		this.page = 1;
	},
	methods: {
		getlist(type){
			let data = {
				page:this.page,
			}
			this.$Request.get(this.$api.give.giveList,data).then(res => {
				uni.stopPullDownRefresh();
				if(type==2){
					this.giveList = this.giveList.concat(res.data.list);
					if(res.data.list==''){
						this.morestatus = "nomore"
					}
					return
				}
				this.giveList = res.data.list;
				this.morestatus = "loadmore"
			});
		},
		goDetail(m_order_id,avatar,nickname,create_time,title){
			let caseobj = {
				avatar:avatar,
				nickname:nickname,
				create_time:create_time,
				title:title
			}
			uni.navigateTo({
				url:"/casePage/case/caseDetail?m_order_id=" + m_order_id + '&caseobj=' + JSON.stringify(caseobj)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #FFFFFF;
	padding-top: 20rpx;
	
	.header {
		.detail_bom_list{
			width: 750rpx;
			position: relative;
			.number{
				min-width: 60rpx;
				min-height: 42rpx;
				background: #1298FF;
				border-radius: 10rpx;
				position: absolute;
				right: 14rpx;
				bottom: 84rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding: 0 6rpx;
			}
		.jian_bom{
			display: flex;
			flex-wrap: wrap;
			padding-top: 14rpx;
			width: 710rpx;
			margin: 0 auto;
			box-sizing: border-box;
			border-bottom: 1px solid #D6D6D6;
			.tui_sec{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 32%;
				border-radius: 25rpx;
				margin-bottom: 10rpx;
				padding-bottom: 20rpx;
				margin-left: 5rpx;
				margin-right: 5rpx;
				position: relative;
				
				.picurl{
					padding: 20rpx 26rpx 0 16rpx;
					image{
						width: 198rpx;
						height: 204rpx;
						border-radius: 10rpx;
					}
				}
				.sec{
					padding: 0 16rpx 0 0;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 20rpx;
					padding-left: 14rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
				}
				.sec2{
					font-size: 24rpx;
					color: #E80303;
					font-weight: bold;
					margin-top: 9rpx;
					padding-left: 14rpx;
					padding-bottom: 10rpx;
					box-sizing: border-box;
				}
				
			}
			
		}
		
		}
		.sec {
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding: 20rpx;
			margin-bottom: 10rpx;
			.miaoshu{
				margin-top: 32rpx;
			}
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					display: flex;
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.name {
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 12rpx;
						.name_text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}
						.name_time {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-top: 20rpx;
						}
					}
				}
				.right {
					display: flex;
					align-items: center;
					flex-direction: column;
					image {
						width: 34rpx;
						height: 34rpx;
						padding-right: 18rpx;
					}
					text {
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
}
</style>
